// OVERLAYS
// -------------------------------------------------------------------------

.full-overlay
    background rgba(0, 0, 0, 0.7)
    left 0
    height 100%
    position fixed
    top 0
    width 100%
    z-index 7

.full-overlay-contents
    background overlayBackground
    height 608px
    left 0
    overflow auto
    padding 15px
    position fixed
    top headerHeight
    z-index 9
    width 100%

    h2
        border-bottom 3px solid darkHoverColor
        color brightTextColor
        font-size 175%
        font-weight normal
        margin 0 0 16px 0
        padding 0 0 5px 0
        -webkit-user-select none
        user-select none

    h4
        font-size 140%
        margin 20px 0 0 0
        padding-top 6px
        -webkit-user-select none
        user-select none

    // Spaced span (between input fields).
    span.spaced
        margin-left 6px
        margin-right 6px

    // Divs with margin on the top.
    div.topmargin
        margin-top 12px

    // The close "X" icon.
    .close
        margin-top 4px

    // The tab titles (headers).
    .tab-headers
        left 266px
        position absolute
        top 18px

        // Each tab header is a label.
        label
            cursor pointer
            display inline-block
            margin-right 6px
            margin-top 4px
            padding 5px 10px 7px 10px

        // Mouse over a label.
        label:hover
            color darkHoverColor

        // The active help tab.
        label.active
            background-color darkHoverColor !important
            color brightTextColor !important
            cursor default

    // Tab containers.
    .tab
        max-height 100%

        h4
            margin-top 0

    // Left column on overlays are floating to left.
    .left-col
        border-right 1px solid darkHoverColor
        float left
        min-height 500px
        padding-right 3px
        width 241px

        // The models list on the left.
        .models-list
            margin-bottom 8px
            overflow auto

            // Each entity ID input field.
            .id
                width 152px

        // Notes are shown in italic and small letters.
        // Usually on the bottom of the models list.
        .notes
            font-style italic
            margin-top 15px

        // Row wrapper.
        .row
            background-color mediumBgColor
            border-bottom 1px solid brightBgColor
            margin-bottom 6px
            width 225px

            // Text input fields should look like normal read-only text.
            input[type="text"]
                background-color Transparent
                border-width 0
                color brightTextColor
                font 14px/24px Arial, Helvetica, sans-serif
                margin 2px 15px 2px 2px
                padding-left 4px

            // Edit icons.
            .edit
                margin-right 12px
                margin-top -2px

            // Delete icons.
            .delete
                margin-top -2px

        // Display an arrow next to selected rows.
        span.arrow
            border-top 16px solid Transparent
            border-bottom 15px solid Transparent
            border-left 16px solid darkHoverColor
            display none
            float right
            height 0px
            width 0px

        // Active rows are highlighted.
        .row.active
            background-color darkHoverColor
            border-color rgba(60, 150, 70, 1)

            // Active input fields should look editable.
            input[type="text"]
                background-color inputBgColor !important
                color inputTextColor !important

        // Show arrow when row is active.
        .row.active span.arrow
            display inline-block !important

        // Div containing the "Add new" model text field and button.
        div.create
            margin-top 20px

            // The input where user types the ID of models.
            input
                width 141px

            // The "Create new" model button.
            button
                background-image url(../images/but-add-small.png)
                padding-bottom 1px
                padding-right 25px
                padding-top 1px
                margin-left 3px
                margin-right 0

    // Right column has a border on the left and margin.
    .right-col
        margin-left 260px
        min-height 500px

        // Position form labels and input fields.
        .panel
            margin-bottom 20px
            margin-top 10px

            label
                display inline-block
                width 120px

        // Make the form fields spaced.
        .panel > div
            margin-bottom 2px

        // No left margin on toggle checkbox.
        .toggle
            margin-left 0
            width auto !important

        // Long input fields.
        input.long
            width 480px

        // Medium input fields.
        input.medium
            width 180px

        // Short input fields.
        input.short
            width 60px

        // Align select boxes by using negative margin.
        select
            margin-left -1px
            width 60px